<template>
  <div class="tree-select">
    <el-select
      v-model="modelValue"
      :clearable="clearable"
      :filterable="filterable"
      :placeholder="placeholder"
      ref="treeSelectRef"
      @clear="clearSelect"
      :filter-method="dataFilter"
    >
      <!-- <el-option :label="label" :value="value" :key="value"> -->
      <el-option :value="value">
        <el-tree
          :data="data"
          :props="props"
          :node-key="props.value"
          :show-checkbox="showCheckBox"
          :filter-node-method="treeDataFilter"
          :highlight-current="highlightCurrent"
          :default-expand-all="defaultExpandAll"
          :default-expanded-keys="defaultExpandedKeys"
          ref="treeRef"
          @node-click="nodeClick"
        ></el-tree>
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  model: {
    prop: 'selected',
    event: 'change'
  },
  props: {
    selected: null,
    props: {
      type: Object,
      default: () => ({
        value: 'id',
        label: 'label',
        children: 'children'
      })
    },
    // 显示清除按钮
    clearable: {
      type: Boolean,
      default: false
    },
    // 启用筛选
    filterable: {
      type: Boolean,
      default: false
    },
    // 占位符
    placeholder: {
      type: String,
      default: () => {
        return '请选择'
      }
    },
    // el-tree 数据源
    data: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 是否展开tree
    defaultExpandAll: {
      type: Boolean,
      default: false
    },
    // 高亮显示选中
    highlightCurrent: {
      type: Boolean,
      default: false
    },
    showCheckBox: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      label: '',
      value: '',
      filterText: '',
      // 默认选中
      defaultExpandedKeys: []
    }
  },
  watch: {
    // // select v-model
    modelValue(val) {
      this.$emit('change', val)
      console.log('watch: ', val)
      this.initData()
    },
    // 筛选字段
    filterText(val) {
      this.$refs.treeRef.filter(val)
    },
  },
  computed: {
    modelValue: {
      get() {
        console.log('get-----------', this.selected)
        return this.selected
      },
      set(val) {
        console.log('set: ------')
        this.$emit('change', val)
      }
    }
  },
  created() {
    console.log('mounted...')
    this.$nextTick(() => {
      this.initData()
    })
  },
  methods: {
    initData() {
      console.log(this.modelValue)
      console.log("leng: ",this.data.length)
      console.log("len: ",this.data)
      if (this.modelValue && this.data.length > 0) {
        this.$refs.treeRef.setCurrentKey(this.modelValue)
        this.value = this.$refs.treeRef.getNode(this.modelValue).data.title
        console.log(this.modelValue)
        // this.defaultExpandedKeys = [this.modelValue]
        // this.$refs.treeRef.setCurrentKey(this.defaultExpandedKeys)
        // console.log(this.$refs.treeRef.getNode(this.modelValue))
        // console.log('list:', this.defaultExpandedKeys)
        console.log(this.label)
      } else {
        this.$refs.treeRef.setCurrentKey()
      }
      this.initScroll()
    },
    // 处理点击节点
    nodeClick(node) {
      this.value = node.id
      this.label = node.title
      this.$emit('change', node.id)
      this.$refs.treeRef.setCurrentKey(this.value)
      this.$refs.treeSelectRef.blur()
    },
    // 清空选择
    clearSelect() {
      if (this.modelValue) {
        this.modelValue = null
      }
    },
    // select筛选数据
    dataFilter(val) {
      this.filterText = val
      this.treeDataFilter(this.filterText, this.data)
    },
    // tree 筛选数据
    treeDataFilter(val, data) {
      if (!val) return true
      if (!data.title) return true
      return data.title.indexOf(val) !== -1
    },
    // 初始化滚动条
    initScroll() {
      this.$nextTick(() => {
        const scrollWrap = document.querySelectorAll('.el-scrollbar .el-select-dropdown__wrap')[0]
        const scrollBar = document.querySelectorAll('.el-scrollbar .el-scrollbar__bar')
        scrollWrap.style.cssText = 'margin: 0px; max-height: none; overflow: hidden;'
        scrollBar.forEach(ele => (ele.style.width = 0))
      })
    }
  }
}
</script>

<style lang="less" scoped>
.el-select-dropdown__item {
  height: auto;
}
.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
  height: auto;
  max-height: 274px;
  padding: 0;
  overflow: hidden;
  overflow-y: auto;
}

.el-select-dropdown__item.selected {
  font-weight: normal;
  background-color: #409eff;
}

.ul li > .el-tree .el-tree-node__content {
  height: auto;
  padding: 0 20px;
}

.el-tree-node__label {
  font-weight: normal;
}
</style>
